{/* LAYOUT模板 */}
<layout name="layout"/>
{/* LAYOUT模板 */}
{/* import Js,Css */}	

<css href="__THEMES__/css/common.css"/>
<css href="__CSS__/jquery-ui.css" />
<js  href="__JS__/core/jquery-ui.1.10.4.js" />
<js  href="__JS__/core/plugins.js" />
<css href="__PLUGS__/ckslide/slide.css"/>
<js  href="__PLUGS__/ckslide/slide.js"/>
{/* import js,css */}



<div style="position:relative;">
	<div class="ck-slide">
	  	<ul class="ck-slide-wrapper">
	    	<li> 
	      		<a href="{:U('goods/yinxiang')}">
	        		<img alt="点击了解产品" src="__THEMES__/images/will_buy_mini.jpg" title="点击了解产品">
	      		</a>
	    	</li>
	    	<li style="display: none;">
	      		<a href="{:U('goods/yinxiang')}">
	        		<img alt="点击了解产品" src="__THEMES__/images/jigou_mini.jpg" title="点击了解产品">
	      		</a>
	    	</li>
	  </ul>
	  <a class="ctrl-slide ck-prev" href="javascript:">上一张</a>  
	  <a class="ctrl-slide ck-next" href="javascript:">下一张</a>
	  <div class="ck-slidebox">
	    	<div class="slideWrap">
	     	 	<ul class="dot-wrap">
	        		<li class="current">
	          			<em>1</em>
	        		</li>
	        		<li>
	          			<em>2</em>
	        		</li>
	      		</ul>
	    	</div>
	  	</div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		// 图片轮播
		$('.ck-slide').ckSlide();
	});
</script>


{/* 丰富的学习课程+ 全新的教育理念 */}
<style type="text/css">
.course-linian{
	width:1200px;
	margin:auto;
	margin-top:10px;
	margin-bottom:20px;
}
.course-wrap{
	width:49.6%;
	border:1px solid #ddd;
	height:330px;
	position: relative;
}
.course-wrap .title,.linian-wrap .title,.service-wrap .title,.problem-wrap .title{
	display:block;
	width:100%;
	height:60px;
	line-height:60px;
	background:#06b2ff;
	color:#fff;
	text-indent: 2em;
	margin:-1px 0px 0px 0px;
}
.course-wrap .title-icon,.linian-wrap .title-icon,.service-wrap .service-icon,.problem-wrap .problem-icon{
	display:block;
	position: absolute;
	width:50px;
	height:50px;
	top:5px;
	left:5px;
}
.course-wrap .course-icon{
	background:url(__IMG__/front/icon.png);
	background-position: 0px 0px;
}
.linian-wrap {
	width:49.6%;
	border:1px solid #ddd;
	height:330px;
	position: relative;
}
.linian-wrap .linian-icon{
	background:url(__IMG__/front/icon.png);
	background-position: -50px 0px;
}
.service-wrap {
	width:49.6%;
	border:1px solid #ddd;
	height:330px;
	position: relative;
}
.service-wrap .service-icon{
	background:url(__IMG__/front/icon.png);
	background-position: -100px 0px;
}
.problem-wrap {
	width:49.6%;
	border:1px solid #ddd;
	height:330px;
	position: relative;
}
.problem-wrap .problem-icon{
	background:url(__IMG__/front/icon.png);
	background-position: -150px 0px;
}
.course-linian .img-box{
	height:269px;
}
.service-list{list-style: none;margin: 0px;}
.service-list li{
	display: block;
	float:left;
	width:50%;
	*width:49.9%;
	_width:49.9%;
	height:135px;
}
.service-list li a{
	display:block;
	width:75px;
	height:75px;
	margin:auto;
	margin-top:5px;
	background: url(__IMG__/front/service-icons.png);
}
.service-list li .text{
	display: block;
	text-align: center;
	font-size:28px;
	color:#f96822;
}
.service-list .kefu{
	background-position: 0px 0px;
}
.service-list .shangmen{
	background-position: -75px 0px;
}
.service-list .advice{
	background-position: -150px 0px;
}
.service-list .rule{
	background-position: -225px 0px;
}
.service-list .bright{
	border-right:1px solid #ddd;
}
.service-list .bbottom{
	border-bottom:1px solid #ddd;
}
</style>

<div class="course-linian">
	<div class="wrap1 clearfix">
		<div class="course-wrap fl r">
			<h2 class="title">
				<i class="title-icon course-icon"></i>
				丰富的学习课程
			</h2>
			<div class="img-box">
				<img src="__IMG__/front/course.jpg" width="100%" height="100%"/>
			</div>
		</div>
		<div class="linian-wrap fr">
			<h2 class="title">
				<i class="title-icon linian-icon"></i>
				全新的教育理念
			</h2>
			<div class="img-box">
				<img src="__IMG__/front/linian.jpg" width="100%" height="100%"/>
			</div>
		</div>
	</div>
	<div class="wrap2 clearfix mp10">
		<div class="service-wrap fl r">
			<h2 class="title">
				<i class="title-icon service-icon"></i>
				售后服务
			</h2>
			<div class="img-box">
				<ul class="service-list">
					<li class="bright bbottom">
						<a href="" class="kefu"></a>
						<span class="text">在线客服</span>
					</li>
					<li class="bbottom">
						<a href="" class="shangmen"></a>
						<span class="text" style="color: #ecaf0b;">申请上门服务</span>
					</li>
					<li class="bright">
						<a href="" class="advice"></a>
						<span class="text" style="color: #fa5959;">投诉建议</span>
					</li>
					<li>
						<a href="" class="rule"></a>
						<span class="text" style="color: #5de053;">售后服务政策</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="problem-wrap fr b">
			<h2 class="title">
				<i class="title-icon problem-icon"></i>
				使用常见问题
			</h2>
			<style type="text/css">
				.con-item{display: block;height:40px;margin-top: 5px;}
				.con-item .icon,.con-item .contitle{display: block;float:left;}
				.con-item .time{display: block;float: right;height:40px;line-height: 50px;font-size: 14px;color:#808080;}
				.con-item .icon{width: 30px;height: 30px;border-radius: 3px;background:#606060;margin-top: 5px;line-height: 30px;text-align: center;color: #fff;font-size:16px;font-family: "微软雅黑";margin-left: 10px;}
				.con-item .contitle{heigth:50px;line-height: 40px;text-indent: 10px;font-size:16px;color:#606060;font-family:"微软雅黑";}
				.con-item .iconBg0{background: #606060;}
				.con-item .iconBg1{background: #797979;}
				.con-item .iconBg2{background: #999999;}
				.con-item .iconBg3{background: #adadad;}
			</style>
			<div class="img-box">
				<volist name="problem_list" id="problom">
					<div class="con-item clearfix">
						<if condition="$key eq 0">
							<span class="icon iconBg0">{$key + 1}</span>
						<elseif condition="$key eq 1"/>
							<span class="icon iconBg1">{$key + 1}</span>
						<elseif condition="$key eq 2"/>
							<span class="icon iconBg2">{$key + 1}</span>
						<else/>
							<span class="icon iconBg3">{$key + 1}</span>
						</if>						
						<a href="{:U('service/item')}/id/{$problom.article_id}" target="_blank">
							<p class="contitle">{$problom.title}</p>
						</a>
						<span class="time">
							【2017.09.09】
						</span>
					</div>
				</volist>
			</div>
		</div>
	</div>
</div>






















<include file="Library:lib_lazyload"/>
<include file="Library:service"/>
<include file="Library:footer"/>